<template>
  <div class="product-container">
    <!-- 内容main -->
    <el-main v-show="true">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="6" class="echarts_left">
          <el-card style="max-width: 480px" class="electricity">
            <template #header>
              <div class="card-header">
                <span>用电统计</span>
              </div>
            </template>
            <div
              class="card-body"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            >
              <div class="electricity-body">
                <div>
                  <img :src="electricityLogo" alt="" />
                </div>
                <div class="electricity-info">
                    <div v-for="(item,index) in electricityList" :key="index" class="ele-content">
                      <div>{{item.info}}:</div>
                      <div class="ele-content-number">{{item.num}}kwh</div>
                    </div>
                </div>
              </div>
            </div>
          </el-card>

          <el-card style="max-width: 480px" class="electricity-day">
            <template #header>
              <div class="card-header">
                <span>每日用电</span>
              </div>
            </template>
            <div class="ele-day-content">
              <div v-for="(item,index) in eleDayList" :key="index" class="ele-day-content">
                <div>{{item.info}}:</div>
                <div class="ele-day-number">{{item.num}}kwh</div>
              </div>
            </div>
            <div
              class="card-body"
              ref="eleDayChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              style="padding:8px"
            ></div>
          </el-card>
          
          <el-card style="max-width: 480px" class="electricity-month">
            <template #header>
              <div class="card-header">
                <span>每月用电</span>
              </div>
            </template>
            <div class="ele-month-content">
              <div v-for="(item,index) in eleMonthList" :key="index" class="ele-month-content">
                <div>{{item.info}}:</div>
                <div class="ele-month-number">{{item.num}}kwh</div>
              </div>
            </div>
            <div
              class="card-body"
              ref="eleMonthChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              style="padding:8px"
            ></div>
          </el-card>
        </el-col>
        <!-- 主视觉 -->
        <el-col :span="12" class="main_view">
          <div class="main-house">
            <el-select
              v-model="value"
              placeholder="请选择农场"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6" class="echarts_right">
          <el-card style="max-width: 480px" class="slaughter">
            <template #header>
              <div class="card-header">
                <span>农舍电耗占比</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="housePieChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>

          <el-card style="max-width: 480px" class="envControl">
            <template #header>
              <div class="card-header">
                <span>用电环比分析</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="consumeChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
          <el-card style="max-width: 480px" class="monitor">
            <template #header>
              <div class="card-header">
                <span>设备电耗比</span>

              </div>
            </template>
            <div
              class="card-body"
              ref="deviceEleChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script setup name="Product">
import { timestamp } from '@vueuse/core';
import * as echarts from "echarts";
// import { da } from 'element-plus/es/locale';
import {
  onMounted,
  ref,
  watch,
  watchEffect,
  reactive,
  onUnmounted,
  computed,
} from "vue";
import electricityLogo from "@/assets/imgs/iot/用电量.png"

const router = useRouter();


/** getCurrentInstance使用注意点
 * getCurrentInstance 只能在 setup 或生命周期钩子中使用
 * getCurrentInstance线上环境报错问题: 使用proxy代替ctx,proxy线上不会出现问题
 * 在vue3中不推荐使用getCurrentInstance获取组件实例
 * 如果是获取dom大家可以通过ref获取
 * 至于其他的一些常用属性和方法，vue3中的setup中提供了props和contexts上下文
 */
const { proxy } = getCurrentInstance();

const value = ref('广兴01舍')

const options = [
  {
    value: 'Option1',
    label: '广兴01舍',
  },
  {
    value: 'Option2',
    label: '广兴02舍',
  },
  {
    value: 'Option3',
    label: '广兴03舍',
  },
  {
    value: 'Option4',
    label: '广兴04舍',
  },
  {
    value: 'Option5',
    label: '广兴05舍',
  },
]



/** 创建一个响应式变量currentTime，初始值为空字符串 */
const electricityList = ref([//用电统计
  { info: '今日用电量', num: 283 },
  { info: '本月用电量', num: 28300 },
  { info: '每羽用电量', num: 1 },
])
const eleDayList =ref([//每日用电
  { info: '今日用电', num: 283 },
  { info: '昨日用电', num: 283 },
])
const eleMonthList =ref([//每月用电
  { info: '本月用电', num: 28300 },
  { info: '上月用电', num: 28300 },
])




const housePieChartRef = ref(null); //农舍耗电占比
const consumeChartRef = ref(null);//用电环比分析
const deviceEleChartRef = ref(null);//设备电耗比

const eleDayChartRef = ref(null);//每日用电
const eleMonthChartRef = ref(null);//每月用电

const diary = ref(null);
const eggDay = ref(0);
const consumeDay = ref(0);
const waterDay = ref(0);
const eggRateDay = ref(0);

const dead = ref(null);
const deadSer = ref([]);
const consume = ref(null);
const consumeSer = ref([]);
const water = ref(null);
const waterSer = ref([]);
const egg = ref(null);
const eggSer = ref([]);
const eggRate = ref(null);//1111
const eggRateSer = ref([]); //产蛋率
const rate = ref(null);
const rateSer = ref([]);

const fullscreenLoading = ref(false);



const eggRateData = {//每日用电
  time: ["4", "8", "12", "16", "20", "24"],
  data1: [45, 79, 42, 5, 34, 42], 
  data2: [20, 55, 12, 5, 8, 62]  
};
const drawEggRateChart = () => {//每日用电
  const option = {
    title: {
      text: "(单位:kw)",
      textStyle: {
        color: "#fff",
        fontSize: 10
      },
    },
    legend: {
      show: true, // 显示图例
      data: ["今日用电", "昨日用电"], // 图例对应的系列名称
      textStyle: {
        color: "#fff",
      },
      orient: "horizontal",
      // position: 'center',
      right:"5%"
    },
    grid: {
      top: 30,
      left: 30,
      right: 30,
      bottom: 60,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(75, 253, 238, 0.4)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: {
      type: "category",
      data: eggRateData.time,
      axisLine: {
        lineStyle: {
          color: "rgba(60,132,163,0.4)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
        fontSize: 10,
      },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#FFF",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(60,132,163,0.2)",
        },
      },
    },
    series: [
      {
        name: "今日用电",
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#299a93" },
            { offset: 1, color: "rgba(98,74,0,0)" },
          ]),
        },
        lineStyle: {
          width: 2,
          color: "#299a93",
        },
        showSymbol: false,
        
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: "#299a93",
        },
        data: eggRateData.data1
      },
      {
        name: "昨日用电",
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#146fd7" },
            { offset: 1, color: "rgba(20, 111, 215,0)" },
          ]),
        },
        lineStyle: {
          width: 2,
          color: "#146fd7",
        },
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: "#146fd7",
        },
        data: eggRateData.data2
      },
    ]
  };

  const eggRateChartInstance = echarts.init(eleDayChartRef.value);
  eggRateChartInstance.setOption(option);

  // 窗口大小改变时，图表大小自适应
  window.addEventListener("resize", () => {
    eggRateChartInstance.resize();
  });
};

// 每月用电
const eleMonthData = {
  time: ["001舍", "002舍", "003舍", "广兴1舍", "广兴2舍", "广兴3舍"],
  data1: [145, 179, 242, 45, 324, 142],
};
const drawEleMonthChart = () => {
  const option = {
    title: {
      text: "(单位: kW)",
      textStyle: {
        color: "#fff",
        fontSize: 10,
      },
    },
    tooltip: {
      show: true,
      trigger: 'item',
    },
    grid: {
      top: 30,
      left: 30,
      right: 30,
      bottom: 60,
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: eleMonthData.time,
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff', // 修改为白色以确保可读性
          fontSize: 12,
          formatter: function (params) {
            let str = "";                
            const paramsLen = params.length;
            const len = 5;                  
            const rowNumber = Math.ceil(paramsLen / len);
            if (paramsLen > len) {
              for (let i = 0; i < rowNumber; i++) {
                const start = i * len;      
                const end = start + len;    
                if (i === rowNumber - 1) {
                  str += params.substring(start, paramsLen);
                } else {
                  str += params.substring(start, end) + "\n";
                }
              }
            } else {
              str = params;
            }
            return str;                   
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(133, 189, 254, 1)',
            type: 'dashed',
          },
        },
        show: true,
      },
    ],
    series: [
      {
        name: '本月用电',
        type: 'bar',
        barMaxWidth: 18,
        zlevel: 10,
        data: eleMonthData.data1,
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(31, 129, 255, 1)',
              }, {
                offset: 1,
                color: 'rgba(31, 134, 255, 0)',
              }],
            },
            barBorderRadius: [30, 30, 0, 0],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(31, 129, 255, 1)',
                fontSize: 12,
                fontWeight: 400,
              },
            },
          },
        },
      },
    ],
  };

  const eleMonthChartInstance = echarts.init(eleMonthChartRef.value);
  eleMonthChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    eleMonthChartInstance.resize();
  });
};

// 农舍耗电占比
const drawPieChart = () => {
  const s1_data = [
    { value: 2555, name: '01号舍' },
    { value: 2515, name: '02号舍' },
    { value: 2745, name: '广兴1号舍' },
    { value: 300, name: '广兴2号舍' },
    { value: 3140, name: '广兴3号舍' }
  ];

  const colorStops = [
    [
      { offset: 0, color: 'rgba(139, 200, 191, 0.4)' }, // 从透明到淡绿色
      { offset: 1, color: '#2cb299' }
    ],
    [
      { offset: 0, color: '#5e7fd0' },
      { offset: 1, color: '#79a0e8' }
    ],
    [
      { offset: 0, color: '#dcb35c' },
      { offset: 1, color: '#dcb35c' }
    ],
    [
      { offset: 0, color: '#d45e39' },
      { offset: 1, color: '#d45e39' }
    ],
    [
      { offset: 0, color: '#c2185b' },
      { offset: 1, color: '#38bde1' }
    ]
  ];
  const totalElectricity = s1_data.reduce((sum, item) => sum + item.value, 0); // 计算总电量
  const l_data = s1_data.map(data => data.name);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: `{b}: {c} kwh`,
    },
    legend: {
      show: true,
      type: 'scroll',
      icon: 'circle',
      orient: 'vertical',
      left: '65%',
      top: 'center',
      textStyle: {
        fontSize: 12,
        color: '#fff',
      },
      data: l_data
    },
    series: [{
      name: '本月用电量',
      type: 'pie',
      radius: ['55%', '75%'],
      center: ['35%', '50%'],
      data: s1_data,
      itemStyle: {
        normal: {
          borderColor: '#1E3477',
          borderWidth: 2,
          label: {
            show: false,
            formatter: `{a|{c}kwh}\n{hr|}\n{a|{d}%}`,
            rich: {
              a: {
                fontSize: 14,
                padding: [3, 0, 5, 0],
                color: 'rgba(20, 233, 250, 1)'
              },
              hr: {
                borderColor: '#fff',
                width: '100%',
                borderWidth: 0.8,
                height: 0,
              },
            }
          },
          color: function (params) {
            return {
              x: 0,
              y: 1,
              x2: 1,
              y2: 0,
              colorStops: colorStops[params.dataIndex],
            }
          },
        },
      },
    }],
    graphic: [
      {
        type: 'text',
        left: '25%', // 文本位置
        top: '45%', // 文本位置
        style: {
          text: `${totalElectricity}`, // 显示总电量
          fill: '#13E1EB', // 文本颜色
          font: 'bold 18px sans-serif',
          textAlign: 'center'
        }
      },
      {
        type: 'text',
        left: '40%', // 文本位置
        top: '46%', // 文本位置
        style: {
          text: 'kwh', // 显示单位
          fill: '#fff', // 文本颜色
          font: '14px sans-serif',
          textAlign: 'center'
        }
      },
      {
        type: 'text',
        left: '24%', // 文本位置
        top: '55%', // 文本位置
        style: {
          text: '本月用电量', // 显示标题
          fill: '#fff', // 文本颜色
          font: '18px sans-serif',
          textAlign: 'center'
        }
      }
    ]
  };

  const pieChartInstance = echarts.init(housePieChartRef.value);
  pieChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    pieChartInstance.resize();
  });
};

// 用电环比分析
const drawConsumeChart = () => {
  const myData3 = [
    "2024-1",
    "2024-2",
    "2024-3",
    "2024-4",
    "2024-5",
  ];
  const numA = [150, 150, 120, 70, 80];
  const xse = [30, 20, 20, 3, 20];
  const option = {
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(16, 123, 184, .52)",
      confine: true,
    },
    grid: {
      top: "26%",
      left: "5%",
      right: "6%",
      bottom: "3%",
      containLabel: true,
    },
    legend: {
      top: "0%",
      y: "center",
      itemWidth: 14,
      itemHeight: 4,
      itemGap: 10,
      textStyle: {
        fontSize: 12,
        color: "#fff",
        padding: [0, 0, 0, 6],
      },
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#ffffff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        data: myData3,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "用量(kwh)",
        splitNumber: 5,
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 20, 5, 0],
        },
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 14,
            color: "#fff",
            lineHeight: 16,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(28, 130, 197, .3)",
            type: "dashed",
          },
        },
      },
      {
        name: "费用(万)",
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 0, 5, 0],
        },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "用量 kwh",
        type: "bar",
        barMaxWidth: 14,
        itemStyle: {
          normal: {
            color: "#015CC7",
          },
        },
        data: numA,
      },
      {
        name: "费用 万元",
        type: "bar",
        barMaxWidth: 14,
        itemStyle: {
          normal: {
            color: "#1BC7FF",
          },
        },
        data: xse,
      },
    ],
  };

  const consumeChartInstance = echarts.init(consumeChartRef.value);
  consumeChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    consumeChartInstance.resize();
  });
};

// 设备电耗比
const drawDeviceEleChart = () => {
  let series = [];
  let pieDatas = [
    { "value": 75, "name": "环控系统" },
    { "value": 50, "name": "分选系统" },
    { "value": 33, "name": "监控系统" },
    { "value": 50, "name": "供配电系统" },
    { "value": 23, "name": "发酵系统" },
  ];

  let maxRadius = 90,
      barWidth = 6,
      barGap = 8;

  let barColor = [
    "rgba(86,147,255,1)",
    "rgba(0, 255, 255, 1)",
    "rgba(255, 201, 95, 1)",
    "#d4364f",
    "#2cb299"
  ];

  pieDatas.forEach((item, i) => {
    series.push({
      type: 'pie',
      clockwise: false, // 顺时加载
      hoverAnimation: true, // 鼠标移入变大
      radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
      center: ["30%", "50%"],
      label: { 
        show: false 
      },
      tooltip: {
        show: true, // 显示 tooltip
        formatter: function (params) {
          return `${params.name}: ${params.value}%`;
        }
      },
      data: [{
        value: item.value,
        name: item.name,
        itemStyle: { color: barColor[i] }
      }, {
        value: 100 - item.value,
        name: '',
        itemStyle: { color: "transparent" },
        tooltip: { show: false },
        hoverAnimation: false // 透明部分不需要动画
      }]
    });
  });

  const option = {
    grid: {
      top: '30%',
      bottom: '54%',
      left: "10%",
      containLabel: false
    },
    tooltip: { 
      show: false // 不在此处显示 tooltip，使用 pie 的 tooltip
    },
    xAxis: [{ show: false }],
    yAxis: [{
      type: 'category',
      inverse: true,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        inside: true,
        textStyle: { color: "#fff", fontSize: 14 },
        margin: 195,
        show: true
      },
    }],
    legend: {
      show: true,
      orient: "vertical",
      top: '5%',
      right: '5%',
      icon: 'circle',
      itemWidth: 12,
      itemGap: 20,
      data: pieDatas.map(x => x.name), // 从 pieDatas 获取名称
      textStyle: { fontSize: 14, color: '#fff' },
    },
    series: series,
  };

  const deviceEleChartInstance = echarts.init(deviceEleChartRef.value);
  deviceEleChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    deviceEleChartInstance.resize();
  });
};




const get7Day = () => {
  let today = new Date();

  // 获取前七天的日期
  let date1 = new Date(today.getTime() - 0 * 24 * 60 * 60 * 1000);
  let date2 = new Date(today.getTime() - 1 * 24 * 60 * 60 * 1000);
  let date3 = new Date(today.getTime() - 2 * 24 * 60 * 60 * 1000);
  let date4 = new Date(today.getTime() - 3 * 24 * 60 * 60 * 1000);
  let date5 = new Date(today.getTime() - 4 * 24 * 60 * 60 * 1000);
  let date6 = new Date(today.getTime() - 5 * 24 * 60 * 60 * 1000);
  let date7 = new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000);

  date1 =
    date1.getFullYear() + "-" + ((date1.getMonth() + 1)>=10?(date1.getMonth() + 1):"0"+(date1.getMonth() + 1)) + "-" + ((date1.getDate())>=10?(date1.getDate()):"0" + date1.getDate());
  date2 =
    date2.getFullYear() + "-" + ((date2.getMonth() + 1)>=10?(date2.getMonth() + 1):"0"+(date2.getMonth() + 1)) + "-" + ((date2.getDate())>=10?(date2.getDate()):"0" + date2.getDate());
  date3 =
    date3.getFullYear() + "-" + ((date3.getMonth() + 1)>=10?(date3.getMonth() + 1):"0"+(date3.getMonth() + 1)) + "-" + ((date3.getDate())>=10?(date3.getDate()):"0" + date3.getDate());
  date4 =
    date4.getFullYear() + "-" + ((date4.getMonth() + 1)>=10?(date4.getMonth() + 1):"0"+(date4.getMonth() + 1)) + "-" + ((date4.getDate())>=10?(date4.getDate()):"0" + date4.getDate());
  date5 =
    date5.getFullYear() + "-" + ((date5.getMonth() + 1)>=10?(date5.getMonth() + 1):"0"+(date5.getMonth() + 1)) + "-" + ((date5.getDate())>=10?(date5.getDate()):"0" + date5.getDate());
  date6 =
    date6.getFullYear() + "-" + ((date6.getMonth() + 1)>=10?(date6.getMonth() + 1):"0"+(date6.getMonth() + 1)) + "-" + ((date6.getDate())>=10?(date6.getDate()):"0" + date6.getDate());
  date7 =
    date7.getFullYear() + "-" + ((date7.getMonth() + 1)>=10?(date7.getMonth() + 1):"0"+(date7.getMonth() + 1)) + "-" + ((date7.getDate())>=10?(date7.getDate()):"0" + date7.getDate());

  date.value = [date7, date6, date5, date4, date3, date2, date1];
  console.log("🚀 ~ get7Day ~ date.value:", date.value)
  
};

const date = ref([]);

const cunlan = ref(null);

const data = reactive({
  weatherList: {},
});

const { weatherList } = toRefs(data);

const countTotal = (arr, keyName) => {
  let $total = 0;
  $total = arr.reduce(function (total, currentValue, currentIndex, arr) {
    return currentValue[keyName] ? total + currentValue[keyName] : total;
  }, 0);
  return $total;
};

const getDiary = async () => {
  const farmId = {
    farmId: 327,
  };
  const res = await listDiary(farmId);

  diary.value = res.rows;
  console.log("🚀 ~ getDiary ~ diary.value:", diary.value);

  cunlan.value = (countTotal(res.rows, "remain") / 10000).toFixed(1);
  eggDay.value = (countTotal(res.rows, "eggNum") / 360).toFixed(0);
  consumeDay.value = (countTotal(res.rows, "consumeWeight") / 1000).toFixed(1);
  waterDay.value = countTotal(res.rows, "waterWeight").toFixed(1);
  eggRateDay.value = ((countTotal(res.rows, "eggNum")/10000 / cunlan.value) * 100).toFixed(1);
};

onMounted(() => {
  get7Day();
  drawEggRateChart(); // 每日用电
  drawEleMonthChart();// 每月用电
  drawPieChart();//农舍耗电占比 
  drawDeviceEleChart(); // 设备电耗比
  drawConsumeChart(); // 用电环比分析
});
</script>

<style scope lang="scss">
.product-container {
  height: 87%;
  width: 100%;
  .el-main {
    width: 100%;
    height: 100%;
    // background-color: yellow;
    overflow-x: hidden;
    padding: 15px;
    .el-row {
      height: 100%;
    }
    .el-card {
      border: none;
      color: #fff;
      height: 31.5%;
      background: linear-gradient(
        180deg,
        #001e54 0%,
        rgba(4, 51, 132, 0.29) 100%
      );
      .el-card__header {
        padding: 0 !important;
        min-height: 34px;
        border-bottom-color: #40a0ff6d;
        .card-header {
          font-size: 20px;
          min-height: 34px;
          padding: 0 0 0 12px;
          display: flex;
          align-items: center;
          span {
            color: #409eff;
            font-weight: bold;
            font-size: 16px;
          }
          .see-all {
            margin-left: 250px;
            font-weight: normal;
            font-size: 12px;
            padding: 2px;
            text-align: center;
            border: 1px solid #40a0ff6d;
            cursor: pointer;
          }
        }
      }
      .el-card__body {
        padding: 0 !important;
        height: calc(100% - 28px);
        min-height: calc(100% - 28px);
        .card-body {
          height: 100%;
        }
      }
    }
    .echarts_left {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .main_view {
      margin-top: 10px;
      .main-house{
        background-color: skyblue;
        margin: 0 40%;
      }
      .cont-list {
        display: flex;
        background: rgba(36, 54, 111, 0.9);
        box-shadow: 0 4px 10px #0000001d;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        position: relative;
        .cont-item {
          display: flex;
          .cont-item-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
              width: 44px;
              height: 44px;
              object-fit: contain;
            }
            span {
              font-size: 18px;
              font-weight: 500;
              color: #fff;
              line-height: 25px;
            }
          }
          .cont-item-right {
            padding-left: 20px;
            .day {
              font-size: 22px;
              font-weight: 700;
              color: #fff;
              line-height: 26px;
            }
            .data {
              font-size: 32px;
              font-weight: 700;
              color: #fff;
              line-height: 33px;
              padding-top: 10px;
            }
            .unit {
              font-size: 22px;
              font-weight: 600;
              color: #b6c1c4;
              line-height: 26px;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .echarts_right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }

  .electricity{//用电统计
    .electricity-body{ 
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 100%;
        height: 130px;
      }
      .electricity-info{
        margin-left: 15px;
        .ele-content{
          display: flex;
          padding: 5px 10px; /* 内边距 */
          margin-bottom: 5px; /* 下间距 */
          color: #fff; /* 文字颜色 */
          .ele-content-number{
            color: #409eff;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .electricity-day{//每日用电
    .ele-day-content{
      display: flex;
      justify-content: space-between;
      padding: 8px;
      .ele-day-number{
        color: #409eff;
        margin-left: 10px;
      }
    }
  }
  .electricity-month{//每月用电
    .ele-month-content{
      display: flex;
      justify-content: space-between;
      padding: 8px;
      .ele-month-number{
        color: #409eff;
        margin-left: 10px;
      }
    }
  }




}

.slaughter .card-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  .card-item {
    width: 48%;
  }
  .item-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 16px;
    .box-text {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: space-between;
      align-items: center;
      .text-value {
        font-weight: bold;
        font-size: 18px;
        span {
          color: #fff;
          font-weight: normal;
          font-size: 14px;
        }
      }
    }
    img {
      height: 25%;
      width: 25%;
    }
  }
}
.monitor .card-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  .card-item {
    font-size: 16px;
    width: 38%;
    height: 38%;
    .item-box {
      height: 100%;
      width: 100%;
      .overview-video {
        width: 100%;
        height: 100%;
        // background-color: transparent;
      }
    }
  }
}
.envControl .card-body {
  .el-carousel {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
    .el-carousel__item {
      text-align: center;
      margin-top: 6px;
    }
  }
  .card-item {
    .item-name {
      font-size: 18px;
    }
    .item-content {
      font-size: 18px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      .content {
        margin-left: 36px;
        margin-top: 10px;
        text-align: left;
        width: 40%;
        padding: 6px 0;
        .content-value {
          color: #409eff;
        }
      }
    }
  }
}
</style>
